<template>
	<view class="">
		<view class="mode">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="name" label-width="120">
					<u-input v-model="form.name" input-align="right" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" label-width="120">
					<u-input v-model="form.mobile" input-align="right" placeholder="请输入联系电话" type="Number" maxlength="11"/>
				</u-form-item>
				<u-form-item label="收货地址" prop="address" label-width="120" @click="cityShow=true">
					<u-input v-model="form.address" input-align="right" type="select" placeholder="请选择收货地址"
						@click="cityShow=true" />
				</u-form-item>
				<u-form-item label="详细地址" prop="detailaddress" label-width="120">
					<u-input v-model="form.detailaddress" input-align="right" placeholder="请输入详细地址" />
				</u-form-item>
				<u-form-item label="设为默认" label-width="120">
					<u-switch slot="right" v-model="form.switchVal"></u-switch>
				</u-form-item>

			</u-form>


              <u-select v-model="cityShow" mode="mutil-column-auto" :list="citylist" @confirm="confirm"></u-select>




		</view>

		<u-button @click="submit" type="primary" :custom-style="{width:'500rpx',backgroundColor:'#037705'}" shape="circle">提交</u-button>


		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityShow: false,
				id: "",
				citylist:[],
				form: {
					name: "",
					mobile: "",
					address: "",
					detailaddress: "",
					switchVal: false,
					province: '',
					city: '',
					area: "",
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					address: [{
						required: true,
						message: '请输入地址',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					detailaddress: [{
						required: true,
						message: '请输入详细地址',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					mobile: [{
						max: 11,
						message: '手机号码不正确',
						trigger: 'change'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		onLoad(options) {
			console.log(options)
			if (options.id) {
				this.id = options.id
				this.getAddress()
			}
			this.addressList()

		},
		methods: {
			addressList(){
				this.$u.post('/api/index/area', {
				
				}, {}).then(res => {
			
				    this.citylist=res.data
				
				}).catch(err => {})
			},
			
			confirm(e) {
				console.log(e)
				var province=e[0].label;
				var city=e[1].label;
				var area=e[2].label;
			
				this.form.address = province + city + area
				this.form.province = province
				this.form.city = city
				this.form.area = area
			},
			getAddress() {
				this.$u.post('/api//user/address', {
					address_id: this.id
				}, {}).then(res => {
					var {
						realname,
						phone,
						province,
						city,
						county,
						address,
						default_addr
					} = res.data;
					this.form.name = realname;
					this.form.mobile = phone;
					this.form.province = province;
					this.form.city = city;
					this.form.area = county;
					this.form.address = province + city + county;
					this.form.detailaddress = address;
					this.form.switchVal = default_addr ? true : false


				}).catch(err => {})

			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {

						this.$u.post('/api/user/addressEdit', {
							address_id: this.id,
							realname: this.form.name,
							phone: this.form.mobile,
							province: this.form.province,
							city: this.form.city,
							county: this.form.area,
							address: this.form.detailaddress,
							default: this.form.switchVal ? 1 : 0
						}, {}).then(res => {
							this.$refs.uToast.show({
								title: '设置成功',
								type: 'success',
								back: true,

							})
						}).catch(err => {})


					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>



<style>

.Topbg {
		height: 300rpx;
		background: #628DFF;

		border-radius: 0rpx 0rpx 50% 50%;
		display: inline-block;
		width: 750rpx;

	}

	.move {
		position: relative;
		bottom: 200rpx;
	
	}
	
	.moneny{
		color: #628DFF;
		font-size: 48rpx;
	}
		

	.mode {
		width: 690rpx;
		
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: auto;
		padding: 50rpx 30rpx;
		box-shadow: 0px 4rpx 6rpx rgba(209, 209, 209, 0.25);
		margin-bottom: 40rpx;
	}
	
	.btn{
		width: 140rpx;
		height: 60rpx;
	
		
		border-radius: 40rpx;
		text-align: center;
		line-height: 60rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
	}
	
	.red{
		background: #FF6450;
	}
	.blue{
		background: #628DFF;
	}
	
	
	.tred{
		color: #FF6450;
		font-size: 48rpx;
		margin-right: 20rpx;
	}
	.tblue{
		color: #FF6450;
		font-size: 48rpx;
		margin-right: 20rpx;
	}

	.u-form-item__message {
		text-align: right;
	}
</style>
